<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar :title="title">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="lunbo">
			<u-swiper :list="list1" height="574rpx" radius="0" indicator indicatorMode="dot" keyName="image"></u-swiper>
			<view class="sheji">
				<view class="money-num"> <text class="money-num-f">￥</text> {{shopping_info.diyinfo.price}}</view>
				<view class="">
					<view class="shops-ms" v-if="infotype_id == 10">{{shopping_info.title}}</view>
					<view class="shops-ms" v-else>{{shopping_info.diyinfo.product_name}}</view>
				</view>

				<view class="shops-guige">{{shopping_info.diyinfo.producttypename}}</view>
			</view>
			<image :src="shopping_info.shoucang == 1 ? '../static/shoucang_xz_icon.png' : '../static/shoucang_icon.png'"
				mode="widthFix" @click="shoucang_click" class="shoucang"></image>
		</view>
		<!-- 商品详情 -->
		<view class="shop_detail">
			<view class="shops-w">
				<view class="title_shop">商品详情</view>
				<view class="d-flex align-items">
					<view class="pinpai">{{shopping_info.diyinfo.content}}</view>
					<!-- <view class="pinpai">风格：简约风</view> -->
				</view>
				<!-- <view class="d-flex align-items">
					<view class="pinpai">座深：40-50cm</view>
					<view class="pinpai">填充物：海绵</view>
				</view> -->
				<view class="" v-for="(pro_img,index) in shopping_info.diyinfo.content_images_url" :key="index">
					<image class="shopImg" :src="pro_img" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 公司简介 -->
		<view class="">
			<view class="company" v-if="shopping_info.group_id == 4" @click="go_cailiaoshang">
				<view class="d-flex align-items w-630 justify-content-space-between">
					<view class="d-flex align-items">
						<image class="tx-gs" :src="company_info.user.avatar" mode=""></image>
						<view class="gs-t">{{company_info.company_name}}</view>
					</view>
					<view class="go_see" >去看看</view>
				</view>
				<view class="w-630 jianjie">{{company_info.instr}}</view>
			</view>
			<view class="company" v-else @click="gosee">
				<view class="d-flex align-items w-630 justify-content-space-between">
					<view class="d-flex align-items">
						<image class="tx-gs" :src="company_info.avatar_url" mode=""></image>
						<view class="gs-t">{{company_info.company_name}}</view>
					</view>
					<view class="go_see" >去看看</view>
				</view>
				<view class="w-630 jianjie">{{company_info.company_jieshao}}</view>
			</view>
		</view>

		<view class="fabu-info">
			<view class="shops">
				<view class="tit">
					<view class="line"></view>
					<view class="tit-size">产品信息</view>
				</view>
				<!-- 商品列表 -->
				<view class="shopping d-flex align-items justify-content-space-between">
					<view class="shopping_list" @click="go_shop(product)" v-for="(product,index) in shopslist"
						:key="index">
						<view class="shopping_phone-img">
							<image class="shopping_phone" v-if="infotype_id == 10" :src="product.zhutu_images_firsturl"
								mode="heightFix"></image>
							<image class="shopping_phone" v-else :src="product.product_images_first" mode="heightFix">
							</image>
						</view>
						
						<view class="">
							<view class="sp-name" v-if="infotype_id == 10">{{product.content2.title}}</view>
							<view class="sp-name" v-else>{{product.infotype.name}}</view>
							<view class="sp-num"> <text class="fuhao">￥</text> {{product.price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="foot_btn d-flex align-items justify-content-center">
			<view class="foot_btn-but">
				<u-button text="获取联系方式" @click="get_phone" color="#FF6400"></u-button>
			</view>
		</view>
		<!-- 获取电话弹窗 -->
		<view class="">
			<u-popup :show="show_pop" round="10" :safeAreaInsetBottom="false" mode="center" @close="close">
				<view class="get_phone">
					<view class="phone-t">联系方式</view>
					<view class="phone-num">{{company_info.company_phone}}</view>
					<!-- <view class="shengyu">剩余免费次数：<text class="cishu">2次</text> </view> -->
					<view class="phone-w">
						<u-button text="确定" shape="circle" @click="queding" color="#FF6400"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getXinxiContent,
		setshouchang,
		getGroupUserinfo,
		getXinxilist,
	} from '@/api/user.js'
	export default {
		data() {
			return {
				list1: [],
				show_pop: false,
				shopping_info: {},
				company_info: {},
				page: 1,
				limit: 7,
				shopslist: [],
				title: '详情',
				infotype_id: ''
			}
		},
		async onLoad(option) {
			this.id = option.id
			this.infotype_id = option.infotype_id
			console.log("这个infot_tueofsfds",this.infotype_id);
			if (option.infotype_id == 10) {
				this.title = '材料详情'
			} else {
				this.title = '商品详情'
			}

			await this.get_shop_detial()
			await this.get_compeny_info()
			this.get_jianfang_list()
		},
		methods: {
			// 获取文章内容
			async get_shop_detial() {
				var data = {
					id: this.id
				}
				await getXinxiContent(data).then(res => {
					console.log("获取商品详情", res);
					if (res.code == 1) {
						this.shopping_info = res.data.content_info
						if (res.data.content_info.diyinfo.infotype_id == 10) {
							let a = []
							for (let s of res.data.content_info.diyinfo.zhutu_images_url) {
								a.push({
									image: s
								})
							}
							this.list1 = a
						} else {
							let a = []
							for (let s of res.data.content_info.diyinfo.product_images_url) {
								a.push({
									image: s
								})
							}
							this.list1 = a
						}

					}
				})
			},
			// 获取建装信息列表
			get_jianfang_list() {
				let type = ''
				if (this.infotype_id == 10) {
					type = 10
				} else {
					type = 11
				}
				var data = {
					page: this.page,
					limit: this.limit,
					type: type,
				}
				getXinxilist(data).then(res => {
					console.log("的发生大法师", res);
					if (res.code == 1) {
						this.shopslist = res.data.list
					}
				})
			},
			// 获取公司信息
			async get_compeny_info() {
				var data = {
					group_id: this.shopping_info.group_id,
					user_id: this.shopping_info.user_id
				}
				await getGroupUserinfo(data).then(res => {
					console.log("获取公司信息", res);
					if (res.code == 1) {
						this.company_info = res.data.user_groupinfo
					}
				})
			},
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 跳转到商家详情
			gosee() {
				uni.navigateTo({
					url: '/pagesA/index_top/jianfang_detail?id=' + this.company_info.group_id + '&user_id=' + this
						.company_info.user_id
				})
			},
			// 跳转到材料商公司页面
			go_cailiaoshang() {
				uni.navigateTo({
					url: '/pagesA/index_top/cailiaoshang_detail?id=' + this.company_info.group_id + '&user_id=' +
						this.company_info.user_id
				})
			},
			get_phone() {
				this.show_pop = true
			},
			go_shop(e) {
				uni.navigateTo({
					url: '/pagesA/anli_zhanshi/shopping?id=' + e.content_id + '&infotype_id=' + e.infotype_id
				})
			},
			queding() {
				this.show_pop = false
			},
			// 点机收藏按钮
			shoucang_click() {
				console.log("点击收藏按钮");
				var data = {
					content_id: this.id
				}
				console.log("数据库为", data);
				setshouchang(data).then(res => {
					console.log("收藏的店铺为", res);
					if (res.code == 1) {
						uni.showToast({
							title: '收藏成功',
							icon: 'success'
						})
						this.get_shop_detial()
					} else {
						uni.showToast({
							title: '取消收藏',
							icon: 'none'
						})
						this.get_shop_detial()
					}
				})

			},
		}
	}
</script>

<style>
	/* 获取电话弹窗 */
	.get_phone {
		width: 540rpx;
	}

	.phone-t {
		font-size: 34rpx;
		font-weight: 600;
		text-align: center;
		color: #1D2129;
		margin-bottom: 53rpx;
		padding-top: 40rpx;
	}

	.phone-num {
		font-size: 56rpx;
		font-weight: 600;
		text-align: center;
		color: #232323;
		margin-bottom: 30rpx;
	}

	.shengyu {
		font-size: 28rpx;
		font-weight: normal;
		color: #999999;
		text-align: center;
	}

	.cishu {
		font-size: 28rpx;
		font-weight: normal;
		color: #232323 !important;
	}

	.phone-w {
		width: 480rpx;
		margin: auto;
		margin-top: 29rpx;
		padding-bottom: 30rpx;
	}

	/* end */
	.fabu-info {
		width: 690rpx;
		background-color: #fff;
		margin: auto;
		border-radius: 10rpx;
	}

	.fuhao {
		font-size: 24rpx;
		font-weight: 600;
		color: #FF4D4F;
	}

	.sp-num {
		font-size: 36rpx;
		font-weight: 600;
		color: #FF4D4F;
		margin: 0rpx 0 15rpx 24rpx;
	}

	.sp-name {
		width: 295rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-left: 20rpx;
		margin-top: 20rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.shopping_phone-img{
		width: 306rpx;
		height: 350rpx;
		overflow: hidden;
	}
	.shopping_phone {
		width: 100%;
		height: 350rpx;
		margin: auto;
		display: block;
		border-top-right-radius: 8rpx;
		border-top-left-radius: 8rpx;
	}

	.shopping_list {
		width: 306rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.shopping {
		width: 640rpx;
		margin: auto;
		flex-wrap: wrap;
	}

	.shops {
		width: 640rpx;
		margin: 30rpx auto;
		padding-top: 20rpx;
	}

	.tit-size {
		font-size: 36rpx;
		font-weight: 600;
		margin-left: 10rpx;
		color: #333;
	}

	.tit {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.line {
		width: 8rpx;
		height: 38rpx;
		background: #FF6400;
	}

	.foot_btn-but {
		width: 670rpx;
		margin: auto;
	}

	.foot_btn {
		width: 750rpx;
		height: 128rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 23rpx 0rpx #999;
	}

	.jianjie {
		font-size: 28rpx;
		line-height: 46rpx;
		color: #999999;
	}

	.go_see {
		width: 110rpx;
		height: 48rpx;
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		color: #FEFFFE;
		border-radius: 8rpx;
		background: #FF6400;
	}

	.gs-t {
		font-size: 32rpx;
		font-weight: normal;
		color: #1C2023;
	}

	.tx-gs {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: block;
		margin-right: 20rpx;
	}

	.company {
		width: 690rpx;
		margin: auto;
		margin-top: 30rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx 0;
	}

	.shopImg {
		width: 690rpx;
		display: block;
		margin-top: 20rpx;
	}

	.pinpai {
		font-size: 24rpx;
		font-weight: normal;
		color: #999999;
		margin: 7rpx 40rpx 0 0;
	}

	.title_shop {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.shops-w {
		width: 690rpx;
		margin: auto;
		padding: 30rpx 0;
	}

	.shop_detail {
		width: 750rpx;
		margin-top: 20rpx;
		background: #fff;
	}

	.shops-guige {
		font-size: 24rpx;
		font-weight: normal;
		color: #999999;
	}

	.shops-ms {
		width: 690rpx;
		font-size: 36rpx;
		font-weight: 600;
		line-height: 42rpx;
		color: #333333;
		margin: 10rpx 0;
	}

	.money-num-f {
		font-size: 30rpx !important;
	}

	.money-num {
		font-size: 50rpx;
		font-weight: 600;
		color: #FF4D4F;
	}

	.sheji {
		width: 690rpx;
		margin: auto;
		padding-bottom: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 20rpx;
		color: #333333;
	}

	.shoucang {
		width: 64rpx;
		display: block;
		position: absolute;
		top: 30rpx;
		right: 40rpx;
	}

	.lunbo {
		width: 750rpx;
		background: #fff;
		overflow: hidden;
		position: relative;
	}

	page {
		background-color: #F7F8FB;
		padding-bottom: 120rpx;
	}
</style>